<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>python vim instant markdown</title>
    <style type='text/css'> <!-- github markdown style from Mou -->
      *{margin:0;padding:0;}
      body {
        font:13.34px helvetica,arial,freesans,clean,sans-serif;
        color:black;
        line-height:1.4em;
        background-color: #F8F8F8;
        padding: 0.7em;
      }
      p {
        margin:1em 0;
        line-height:1.5em;
      }
      table {
        font-size:inherit;
        font:100%;
        margin:1em;
      }
      table th{border-bottom:1px solid #bbb;padding:.2em 1em;}
      table td{border-bottom:1px solid #ddd;padding:.2em 1em;}
      input[type=text],input[type=password],input[type=image],textarea{font:99% helvetica,arial,freesans,sans-serif;}
      select,option{padding:0 .25em;}
      optgroup{margin-top:.5em;}
      pre,code{font:12px Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;}
      pre {
        margin:1em 0;
        font-size:12px;
        background-color:#eee;
        border:1px solid #ddd;
        padding:5px;
        line-height:1.5em;
        color:#444;
        overflow:auto;
        -webkit-box-shadow:rgba(0,0,0,0.07) 0 1px 2px inset;
        -webkit-border-radius:3px;
        -moz-border-radius:3px;border-radius:3px;
      }
      pre code {
        padding:0;
        font-size:12px;
        background-color:#eee;
        border:none;
      }
      code {
        font-size:12px;
        background-color:#f8f8ff;
        color:#444;
        padding:0 .2em;
        border:1px solid #dedede;
      }
      img{border:0;max-width:100%;}
      abbr{border-bottom:none;}
      a{color:#4183c4;text-decoration:none;}
      a:hover{text-decoration:underline;}
      a code,a:link code,a:visited code{color:#4183c4;}
      h2,h3{margin:1em 0;}
      h1,h2,h3,h4,h5,h6{border:0;}
      h1{font-size:170%;border-top:4px solid #aaa;padding-top:.5em;margin-top:1.5em;}
      h1:first-child{margin-top:0;padding-top:.25em;border-top:none;}
      h2{font-size:150%;margin-top:1.5em;border-top:4px solid #e0e0e0;padding-top:.5em;}
      h3{margin-top:1em;}
      hr{border:1px solid #ddd;}
      ul{margin:1em 0 1em 2em;}
      ol{margin:1em 0 1em 2em;}
      ul li,ol li{margin-top:.5em;margin-bottom:.5em;}
      ul ul,ul ol,ol ol,ol ul{margin-top:0;margin-bottom:0;}
      blockquote{margin:1em 0;border-left:5px solid #ddd;padding-left:.6em;color:#555;}
      dt{font-weight:bold;margin-left:1em;}
      dd{margin-left:2em;margin-bottom:1em;}
      @media screen and (min-width: 768px) {
        body {
          width: 748px;
          margin:10px auto;
        }
      }
    </style>
    <style type='text/css'> <!-- pygments style from Armin Ronacher -->
      pre .hll { background-color: #ffffcc }
      pre .c { color: #8f5902; font-style: italic } /* Comment */
      pre .err { color: #a40000; border: 1px solid #ef2929 } /* Error */
      pre .g { color: #000000 } /* Generic */
      pre .k { color: #204a87; font-weight: bold } /* Keyword */
      pre .l { color: #000000 } /* Literal */
      pre .n { color: #000000 } /* Name */
      pre .o { color: #ce5c00; font-weight: bold } /* Operator */
      pre .x { color: #000000 } /* Other */
      pre .p { color: #000000; font-weight: bold } /* Punctuation */
      pre .cm { color: #8f5902; font-style: italic } /* Comment.Multiline */
      pre .cp { color: #8f5902; font-style: italic } /* Comment.Preproc */
      pre .c1 { color: #8f5902; font-style: italic } /* Comment.Single */
      pre .cs { color: #8f5902; font-style: italic } /* Comment.Special */
      pre .gd { color: #a40000 } /* Generic.Deleted */
      pre .ge { color: #000000; font-style: italic } /* Generic.Emph */
      pre .gr { color: #ef2929 } /* Generic.Error */
      pre .gh { color: #000080; font-weight: bold } /* Generic.Heading */
      pre .gi { color: #00A000 } /* Generic.Inserted */
      pre .go { color: #000000; font-style: italic } /* Generic.Output */
      pre .gp { color: #8f5902 } /* Generic.Prompt */
      pre .gs { color: #000000; font-weight: bold } /* Generic.Strong */
      pre .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
      pre .gt { color: #a40000; font-weight: bold } /* Generic.Traceback */
      pre .kc { color: #204a87; font-weight: bold } /* Keyword.Constant */
      pre .kd { color: #204a87; font-weight: bold } /* Keyword.Declaration */
      pre .kn { color: #204a87; font-weight: bold } /* Keyword.Namespace */
      pre .kp { color: #204a87; font-weight: bold } /* Keyword.Pseudo */
      pre .kr { color: #204a87; font-weight: bold } /* Keyword.Reserved */
      pre .kt { color: #204a87; font-weight: bold } /* Keyword.Type */
      pre .ld { color: #000000 } /* Literal.Date */
      pre .m { color: #0000cf; font-weight: bold } /* Literal.Number */
      pre .s { color: #4e9a06 } /* Literal.String */
      pre .na { color: #c4a000 } /* Name.Attribute */
      pre .nb { color: #204a87 } /* Name.Builtin */
      pre .nc { color: #000000 } /* Name.Class */
      pre .no { color: #000000 } /* Name.Constant */
      pre .nd { color: #5c35cc; font-weight: bold } /* Name.Decorator */
      pre .ni { color: #ce5c00 } /* Name.Entity */
      pre .ne { color: #cc0000; font-weight: bold } /* Name.Exception */
      pre .nf { color: #000000 } /* Name.Function */
      pre .nl { color: #f57900 } /* Name.Label */
      pre .nn { color: #000000 } /* Name.Namespace */
      pre .nx { color: #000000 } /* Name.Other */
      pre .py { color: #000000 } /* Name.Property */
      pre .nt { color: #204a87; font-weight: bold } /* Name.Tag */
      pre .nv { color: #000000 } /* Name.Variable */
      pre .ow { color: #204a87; font-weight: bold } /* Operator.Word */
      pre .w { color: #f8f8f8; text-decoration: underline } /* Text.Whitespace */
      pre .mf { color: #0000cf; font-weight: bold } /* Literal.Number.Float */
      pre .mh { color: #0000cf; font-weight: bold } /* Literal.Number.Hex */
      pre .mi { color: #0000cf; font-weight: bold } /* Literal.Number.Integer */
      pre .mo { color: #0000cf; font-weight: bold } /* Literal.Number.Oct */
      pre .sb { color: #4e9a06 } /* Literal.String.Backtick */
      pre .sc { color: #4e9a06 } /* Literal.String.Char */
      pre .sd { color: #8f5902; font-style: italic } /* Literal.String.Doc */
      pre .s2 { color: #4e9a06 } /* Literal.String.Double */
      pre .se { color: #4e9a06 } /* Literal.String.Escape */
      pre .sh { color: #4e9a06 } /* Literal.String.Heredoc */
      pre .si { color: #4e9a06 } /* Literal.String.Interpol */
      pre .sx { color: #4e9a06 } /* Literal.String.Other */
      pre .sr { color: #4e9a06 } /* Literal.String.Regex */
      pre .s1 { color: #4e9a06 } /* Literal.String.Single */
      pre .ss { color: #4e9a06 } /* Literal.String.Symbol */
      pre .bp { color: #3465a4 } /* Name.Builtin.Pseudo */
      pre .vc { color: #000000 } /* Name.Variable.Class */
      pre .vg { color: #000000 } /* Name.Variable.Global */
      pre .vi { color: #000000 } /* Name.Variable.Instance */
      pre .il { color: #0000cf; font-weight: bold } /* Literal.Number.Integer.Long */
    </style>
  </head>
  <body>
    <script>
      if (window.MozWebSocket) {
        window.WebSocket = window.MozWebSocket;
      }

      function openConnection() {
        conn = new WebSocket('ws://127.0.0.1:7001');    
        document.body.innerHTML = 'Connecting...'
        conn.onopen = function () {
          document.body.innerHTML = 'Connected.'
        };

        conn.onmessage = function (event) {
          var html = JSON.parse(event.data);
          var i, s = '';
          for(i = 0; i < 20; i++) s += '<br />';
          var bottom = '<div id="bottom"></div>'
          document.body.innerHTML = html+s+bottom;
          MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
          document.getElementById('bottom').scrollIntoView();
        };

        conn.onclose = function (event) {
          document.body.innerHTML = 'Disconnected.'
        };
      }

      setTimeout(function () {
        openConnection();
      }, 1000);
    </script>
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]], processEscapes: true } });
    </script>
    <script type="text/javascript" 
      src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> 
    </script>
  </body>
</html>
